<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>TAO | CRM 管理</title>

    <link rel="stylesheet" href="/static/css/backend-plugin.min.css">
    <link rel="stylesheet" href="/static/css/backend.css">
</head>
<body class="  ">
<!-- loader Start -->
<div id="loading">
    <div id="loading-center">
    </div>
</div>
<!-- loader END -->
<!-- Wrapper Start -->
<div class="wrapper">
    <div class="iq-sidebar  sidebar-default  ">
        <div class="iq-sidebar-logo d-flex align-items-end justify-content-between">
            <a href="" class="header-logo">
                <img src="/static/picture/logo.png" class="img-fluid rounded-normal light-logo" alt="logo">
                <img src="/static/picture/logo-dark.png" class="img-fluid rounded-normal d-none sidebar-light-img"
                     alt="logo">
                <span>TAO</span>
            </a>
            <div class="side-menu-bt-sidebar-1">
                <svg xmlns="http://www.w3.org/2000/svg" class="text-light wrapper-menu" width="30" fill="none"
                     viewbox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </div>
        </div>
        <div class="data-scrollbar" data-scroll="1">
            <nav class="iq-sidebar-menu">
                <ul id="iq-sidebar-toggle" class="side-menu">
                    <li class="active sidebar-layout">
                        <a href="/page/main" class="svg-icon">
                            <i class="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                     stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                                </svg>
                            </i>
                            <span class="ml-2">主页</span>
                            <p class="mb-0 w-10 badge badge-pill badge-primary">99+</p>
                        </a>
                    </li>
                    <li class="px-3 pt-3 pb-2 ">
                        <span class="text-uppercase small font-weight-bold">客户管理</span>
                    </li>
                    <li class=" sidebar-layout">
                        <a href="/page/customer" class="svg-icon ">
                            <i class="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                     stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                                </svg>
                            </i>
                            <span class="ml-2">基本信息</span>
                        </a>
                    </li>
                    <li class=" sidebar-layout">
                        <a href="/page/lostCustomer" class="svg-icon">
                            <i class="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                     stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
                                </svg>
                            </i>
                            <span class="ml-2">流失客户管理</span>
                        </a>
                    </li>
                    <li class="px-3 pt-3 pb-2">
                        <span class="text-uppercase small font-weight-bold">用户</span>
                    </li>
                    <li class="sidebar-layout">
                        <a href="#app1" class="collapsed svg-icon" data-toggle="collapse" aria-expanded="false">
                            <i>
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                     stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                                </svg>
                            </i>
                            <span class="ml-2">用户管理</span>
                            <svg xmlns="http://www.w3.org/2000/svg" class="svg-icon iq-arrow-right arrow-active"
                                 width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M9 5l7 7-7 7"></path>
                            </svg>
                        </a>
                        <ul id="app1" class="submenu collapse" data-parent="#iq-sidebar-toggle">
                            <li class=" sidebar-layout">
                                <a href="/page/contactChange" class="svg-icon">
                                    <i class="">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none"
                                             viewbox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
                                        </svg>
                                    </i><span class="">修改密码</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="px-3 pt-3 pb-2">
                        <span class="text-uppercase small font-weight-bold">营销管理</span>
                    </li>
                    <li class=" sidebar-layout">
                        <a href="/page/marking" class="svg-icon">
                            <i class="">
                                <svg class="svg-icon" id="iq-chart-1" width="18" xmlns="http://www.w3.org/2000/svg"
                                     fill="none" viewbox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M8 13v-1m4 1v-3m4 3V8M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
                                          style="stroke-dasharray: 96, 116; stroke-dashoffset: 0;"></path>
                                </svg>
                            </i>
                            <span class="ml-2">营销机会管理</span>
                        </a>
                    </li>
                    <li class=" sidebar-layout">
                        <a href="/page/customerPlan" class="svg-icon">
                            <i class="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                     stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5"></path>
                                </svg>
                            </i>
                            <span class="ml-2">客户开发计划</span>
                        </a>
                    </li>
                    <li class="px-3 pt-3 pb-2">
                        <span class="text-uppercase small font-weight-bold">服务管理</span>
                    </li>
                    <li class=" sidebar-layout">
                        <a href="/page/service" class="svg-icon">
                            <i class="">
                                <svg class="svg-icon" id="iq-chart-1" width="18" xmlns="http://www.w3.org/2000/svg"
                                     fill="none" viewbox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M8 13v-1m4 1v-3m4 3V8M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
                                          style="stroke-dasharray: 96, 116; stroke-dashoffset: 0;"></path>
                                </svg>
                            </i>
                            <span class="ml-2">服务创建</span>
                        </a>
                    </li>
                    <li class=" sidebar-layout">
                        <a href="/page/bill" class="svg-icon">
                            <i class="">
                                <svg class="svg-icon" id="iq-chart-1" width="18" xmlns="http://www.w3.org/2000/svg"
                                     fill="none" viewbox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M8 13v-1m4 1v-3m4 3V8M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
                                          style="stroke-dasharray: 96, 116; stroke-dashoffset: 0;"></path>
                                </svg>
                            </i>
                            <span class="ml-2">订单创建</span>
                        </a>
                    </li>
                </ul>
            </nav>
            <div class="pt-5 pb-5"></div>
        </div>
    </div>
    <div class="iq-top-navbar">
        <div class="iq-navbar-custom">
            <nav class="navbar navbar-expand-lg navbar-light p-0">
                <div class="side-menu-bt-sidebar">
                    <svg xmlns="http://www.w3.org/2000/svg" class="text-secondary wrapper-menu" width="30" fill="none"
                         viewbox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </div>
                <div class="d-flex align-items-center">
                    <div class="change-mode">
                        <div class="custom-control custom-switch custom-switch-icon custom-control-inline">
                            <div class="custom-switch-inner">
                                <p class="mb-0"></p>
                                <input type="checkbox" class="custom-control-input" id="dark-mode" data-active="true">
                                <label class="custom-control-label" for="dark-mode" data-mode="toggle">
	                                    <span class="switch-icon-right">
	                                        <svg xmlns="http://www.w3.org/2000/svg" id="h-moon" height="20" width="20"
                                                 class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
	                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                      d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
	                                        </svg>
	                                    </span>
                                    <span class="switch-icon-left">
	                                        <svg xmlns="http://www.w3.org/2000/svg" id="h-sun" height="20" width="20"
                                                 class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
	                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                      d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
	                                        </svg>
	                                    </span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div>HI!<a href="/page/contactChange">{{ .UserName }}</a></div>
                    <button class="navbar-toggler" type="button" data-toggle="collapse"
                            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                            aria-label="Toggle navigation">
                        <svg xmlns="http://www.w3.org/2000/svg" class="text-secondary" width="30" fill="none"
                             viewbox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M4 6h16M4 12h16m-7 6h7"></path>
                        </svg>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ml-auto navbar-list align-items-center">
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <div class="content-page">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="d-flex flex-wrap align-items-center justify-content-between my-schedule mb-4">
                        <div class="d-flex align-items-center justify-content-between">
                            <h4 class="font-weight-bold">营销机会管理</h4>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" id="app2">
                <div class="col-lg-12">
                    <div class="card card-block card-stretch">
                        <div class="card-body p-0">
                            <div class="d-flex justify-content-between align-items-center p-3">
                                <h5 class="font-weight-bold">潜在客户基本信息</h5>
                            </div>
                            <div class="table-responsive">
                                <table class="table data-table mb-0">
                                    <thead class="table-color-heading">
                                    <tr class="">
                                        <th scope="col" class="pr-0 w-01">
                                            <div class="d-flex justify-content-start align-items-end mb-1 ">
                                                <div class="custom-control custom-checkbox custom-control-inline">
                                                    <input type="checkbox" class="custom-control-input m-0"
                                                           id="customCheck1">
                                                    <label class="custom-control-label"
                                                           for="customCheck1"></label>
                                                </div>
                                            </div>
                                        </th>
                                        <th scope="col">
                                            客户姓名
                                        </th>
                                        <th scope="col">
                                            所属公司
                                        </th>
                                        <th scope="col">
                                            E-mail
                                        </th>
                                        <th scope="col">
                                            电话
                                        </th>
                                        <th scope="col">
                                            潜在客户来源
                                        </th>
                                        <th scope="col">
                                            状态
                                        </th>
                                        <th scope="col">
                                            发展客户
                                        </th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr class="white-space-no-wrap" v-for="(latentCustomer,i) in latentCustomers">
                                        <td class="pr-0 ">
                                            <div
                                                    class="custom-control custom-checkbox custom-control-inline">
                                                <input type="checkbox"
                                                       class="custom-control-input m-0"
                                                       id="customCheck">
                                                <label class="custom-control-label"
                                                       for="customCheck"></label>
                                            </div>
                                        </td>
                                        <td class="">
                                            <div class="active-project-1 d-flex align-items-center mt-0 ">
                                                <div class="data-content">
                                                    <div>
                                                        <span class="font-weight-bold">^{ latentCustomer.name }</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            ^{ latentCustomer.company }
                                        </td>
                                        <td>
                                            ^{ latentCustomer.email }
                                        </td>
                                        <td>
                                            ^{ latentCustomer.phoneNumber }
                                        </td>
                                        <td>
                                            ^{ latentCustomer.origin }
                                        </td>
                                        <td>
                                            <div v-if="latentCustomer.latentStatus === 0">
                                                <p class="mb-0 text-nostart d-flex justify-content-start align-items-center">
                                                    <svg class="mr-2" xmlns="http://www.w3.org/2000/svg"
                                                         width="18" viewbox="0 0 24 24" fill="none">
                                                        <circle cx="12" cy="12" r="8" fill="#808080"></circle>
                                                    </svg>
                                                    未开展
                                                </p>
                                            </div>
                                            <div v-if="latentCustomer.latentStatus === 1">
                                                <p class="mb-0 text-success d-flex justify-content-start align-items-center">
                                                    <svg class="mr-2" xmlns="http://www.w3.org/2000/svg"
                                                         width="18" viewbox="0 0 24 24" fill="none">
                                                        <circle cx="12" cy="12" r="8" fill="#3cb72c"></circle>
                                                    </svg>
                                                    已成为正式客户
                                                </p>
                                            </div>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-primary mt-2" @click="setSelectID(latentCustomer.latentCustomerID)" v-if="latentCustomer.latentStatus === 0" data-toggle="modal" data-target=".bd-example-modal-xl">发展客户</button>
                                            <div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog"  v-if="selectID === latentCustomer.latentCustomerID"  aria-hidden="true">
                                                <div class="modal-dialog modal-xl">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title">发展客户</h5>
                                                            <button type="button" class="close"  data-dismiss="modal" aria-label="Close">
                                                                <span aria-hidden="true">&times;</span>
                                                            </button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div class="form-group">
                                                                <label for="exampleInputText1">客户名 </label>
                                                                <input type="text" class="form-control" id="exampleInputText1"
                                                                       v-model="customerSubmit.customerName = latentCustomer.name"
                                                                       :placeholder="latentCustomer.name">
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="exampleInputText1">所属公司 </label>
                                                                <input type="text" class="form-control" id="exampleInputText1"
                                                                       v-model="customerSubmit.customerCompany = latentCustomer.company"
                                                                       :placeholder="latentCustomer.company"
                                                                       >
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="exampleInputText1">E-Mail </label>
                                                                <input type="text" class="form-control" id="exampleInputText1"
                                                                       v-model="customerSubmit.email = latentCustomer.email"
                                                                       :placeholder="latentCustomer.email"
                                                                       >
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="exampleInputText1">电话 </label>
                                                                <input type="text" class="form-control" id="exampleInputText1"
                                                                       v-model="customerSubmit.phoneNumber = latentCustomer.phoneNumber"
                                                                       :placeholder="latentCustomer.phoneNumber">
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                            <button type="button" @click="submit" class="btn btn-primary" data-dismiss="modal">Save changes</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                <div style="text-align: center">
                                    <button class="btn btn-outline-primary mt-2 btn-with-icon" @click="prevPage"
                                            :disabled="currentPage === 1">上一页
                                    </button>
                                    <span>^{ currentPage } / ^{ totalPages }</span>
                                    <button class="btn btn-outline-primary mt-2 btn-with-icon" @click="nextPage"
                                            :disabled="currentPage === totalPages">下一页
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Wrapper End-->
<footer class="iq-footer">
</footer> <!-- Backend Bundle JavaScript -->
<script src="/static/js/backend-bundle.min.js"></script>
<!-- Chart Custom JavaScript -->
<script src="/static/js/customizer.js"></script>

<script src="/static/js/sidebar.js"></script>

<!-- Flextree Javascript-->
<script src="/static/js/flex-tree.min.js"></script>
<script src="/static/js/tree.js"></script>

<!-- Table Treeview JavaScript -->
<script src="/static/js/table-treeview.js"></script>

<!-- SweetAlert JavaScript -->
<script src="/static/js/sweetalert.js"></script>

<!-- Vectoe Map JavaScript -->
<script src="/static/js/vector-map-custom.js"></script>

<!-- Chart Custom JavaScript -->
<script src="/static/js/chart-custom.js"></script>
<script src="/static/js/01.js"></script>
<script src="/static/js/02.js"></script>

<!-- slider JavaScript -->
<script src="/static/js/slider.js"></script>

<!-- Emoji picker -->
<script src="/static/js/index.js" type="module"></script>


<!-- app JavaScript -->
<script src="/static/js/app.js"></script>

<!--vue axion-->
<script src="/static/js/vue.js"></script>
<script src="/static/js/axios-0.18.0.js"></script>
<script>
    new Vue({
        delimiters: ['^{', '}'],
        el: "#app2",
        data: {
            latentCustomers: [],
            latentCustomer: {
                latentCustomerID: 0,
                name: "",
                company: "",
                phoneNumber: "",
                email: "",
                origin: "",
                latentStatus: 0,
            },
            currentPage: 1,
            pageSize: 10,
            totalPages: 1,
            customerSubmit:{
                customerName:"",
                customerCompany:"",
                email: "",
                phoneNumber: ""
            },
            selectID:0
        },
        methods: {
            getCustomers() {
                var _this = this;
                axios.get('/latentCustomer?currentPage='+this.currentPage+'&pageSize='+this.pageSize) // 替换为你的后端API URL
                    .then(response => {
                        console.log(response.data);
                        _this.latentCustomers = response.data.date; // 将获取到的数据赋值给customers
                        _this.totalPages = response.data.total; // 将获取到的数据赋值给customers
                    })
                    .catch(error => {
                        console.error('Error fetching data:', error);
                    });
            },
            prevPage() {
                if (this.currentPage > 1) {
                    this.currentPage--;
                    this.getCustomers();
                }
            },
            nextPage() {
                if (this.currentPage < this.totalPages) {
                    this.currentPage++;
                    this.getCustomers();
                }
            },
            submit(){
                alert("联系客户成功。。。。。")
                var _this = this;
                axios.post('/submitCustomer',_this.customerSubmit) // 替换为你的后端API URL
                    .then(response => {
                        console.log(response.data);
                        this.getCustomers()
                    })
                    .catch(error => {
                        console.error('Error fetching data:', error);
                    });
            },
            setSelectID(latentCustomerID){
                this.selectID = latentCustomerID
            }

        },
        mounted() {
            this.getCustomers()
        }
    });
</script>
</body>
</html>
